<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			*{
				margin: 0;
				padding: 0;
				box-sizing: border-box;
			}
			html,body{
				height: 100%;	
			}
			body{
				background-color: #ddd;
			}
			ul{
				top: 50%;
				left: 50%;
				position: absolute;/*决定对位*/
				width: 600px;
				list-style: none;
				border: 1px solid brown;
				transform: translate(-50%,-50%);
				padding: 15px;/*盒子内边距*/
			}
			li{
				border-bottom: 1px solid white;/*盒子底边边框*/
				line-height: 2;/*变为2倍*/
				font-size: 14px;
				text-indent: 1rem;
				border-bottom-style: dotted;
			}
			li:first-child{      /*第一个子元素*/
				font-size: 2rem;  /*rem是基于html元素的字体大小来决定，而em则根据使用它的元素的大小决定*/
				text-indent: 0;   
				font-weight: bold;  /*加粗*/
				border-bottom-style: solid;
			}
			a:link,a:visited{
				text-decoration: none; /* a标签无下划线*/
			}
			a:hover{
				text-decoration: underline; /*鼠标移到a标签出现下划线*/
			}
		</style>
	</head>
	<body>
		<ul>
			<li>最新文章/New Articles</li>
			<li><a href="#">北京招聘网页设计,平面设计,php</a></li>
			<li>体验javascript的魅力</li>
			<li>jquery世界来临</li>
			<li>网页设计师的梦想</li>
			<li>jquery中的链式编程是什么</li>
			<li>nb</li>
		</ul>
	</body>
</html>
